﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Cart</title>
    <meta charset="utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <link rel="shortcut icon" th:href="@{/icons/favicon.png}"/>
    <!-- GOOGLE WEB FONTS -->
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">

    <!-- BOOTSTRAP 3.3.7 CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>

    <!-- SLICK v1.6.0 CSS -->
    <link rel="stylesheet" th:href="@{/css/slick-1.6.0/slick.css}"/>
    <link rel="stylesheet" th:href="@{/css/minified.css}">
    <link rel="stylesheet" th:href="@{/css/jquery.fancybox.css}"/>
    <link rel="stylesheet" th:href="@{/css/yith-woocommerce-compare/colorbox.css}"/>
    <link rel="stylesheet" th:href="@{/css/owl-carousel/owl.carousel.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/owl-carousel/owl.theme.default.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/js_composer/js_composer.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/woocommerce/woocommerce.css}"/>
    <link rel="stylesheet" th:href="@{/css/woocommerce/woocommerce-layout.css}"/>
    <link rel="stylesheet" th:href="@{/css/woocommerce/woocommerce-smallscreen.css}"/>
    <link rel="stylesheet" th:href="@{/css/yith-woocommerce-wishlist/style.css}"/>

    <!-- PARTICULAR PAGES CSS FILES -->
    <link rel="stylesheet" th:href="@{/css/innerpage.css}">
    <link rel="stylesheet" th:href="@{/css/owl.carousel.css}">
    <link rel="stylesheet" th:href="@{/css/owl.theme.css}">
    <!-- // PARTICULAR PAGES CSS FILES -->
    <link rel="stylesheet" th:href="@{/css/responsive.css}">
    <link rel="stylesheet" th:href="@{/css/custom.css}"/>
    <link rel="stylesheet" th:href="@{/css/app-orange.css}" id="theme_color"/>
    <link rel="stylesheet" href="" id="rtl"/>
    <link rel="stylesheet" th:href="@{/css/app-responsive.css}"/>
</head>

<body class="page woocommerce-cart woocommerce-page">


<div class="body-wrapper theme-clearfix">

    <header id="header" class="header header-style1">
        <div th:replace="commons/bar::#top"></div>

        <div th:replace="commons/bar::#mid"></div>

    </header>

    <div class="listings-title">
        <div class="container">
            <div class="wrap-title">

                <div class="bread">
                    <div class="breadcrumbs theme-clearfix">
                        <div class="container">
                            <ul class="breadcrumb">
                                <li>
                                    <a th:href="@{/index}" th:text="#{home}">Home</a>
                                    <span class="go-page"></span>
                                </li>

                                <li class="active">
                                    <span th:text="#{cart}">Cart</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div id="contents" role="main" class="main-page col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="page type-page status-publish hentry">
                    <div class="entry-content">
                        <div class="entry-summary">
                            <div class="woocommerce">
                                <!--<form id="deleteForm" method="post">-->
                                <!--<input type="hidden" name="_method" value="delete">-->
                                <!--</form>-->
                                <!--提交订单表-->
                                <div th:if="${!cart.itemMap.isEmpty()}">
                                    <main id="main-content" role="main">

                                        <section class="section">
                                            <div class="container table-responsive">
                                                <!--购物车-->
                                                <table class="tbl-cart">
                                                    <thead>
                                                    <tr>
                                                        <th th:text="#{product}">Product Name</th>
                                                        <th style="width: 15%;" th:text="#{price}">Unit Price</th>
                                                        <th style="width: 15%;" th:text="#{quantity}">QTY</th>
                                                        <th class="hidden-xs" style="width: 15%;" th:text="#{total}">Sub
                                                            Total
                                                        </th>
                                                        <th class="hidden-xs" style="width: 10%;"></th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr class="hide empty-cart">
                                                        <td colspan="5">
                                                            It seems your shopping cart is empty, try looking our <a
                                                                href="products.html">products</a>.
                                                        </td>
                                                    </tr>
                                                    <tr th:each="item:${items}">
                                                        <td>
                                                            <a class="entry-thumbnail"
                                                               th:href="@{/simpleproduct/}+${item.getProduct().getPid()}"
                                                               data-toggle="lightbox">
                                                                <img width="180" height="180"
                                                                     th:src="${item.getProduct().getPimage()}"
                                                                     class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image"
                                                                     alt="">
                                                            </a>
                                                            <a th:href="@{/simpleproduct/}+${item.getProduct().getPid()}"><span
                                                                    th:text="${item.getProduct().getPname()}"></span>
                                                            </a>
                                                        </td>
                                                        <td><span class="unit-price">
                                                    <span class="woocommerce-Price-currencySymbol">
                                                        ￥</span>
                                                    <span th:text="${item.getProduct().getShopPrice()}"></span>
                                                    </span>
                                                        </td>
                                                        <td>
                                                            <div class="qty-btn-group">
                                                                <button type="button" class="down"
                                                                        data-th-attr="onclick='deleteFromCart(\''+${item.getProduct().getPid()}+'\')'">
                                                                    -
                                                                </button>
                                                                <input type="text" th:value="${item.getCount()}"/>
                                                                <button type="button" class="up"
                                                                        data-th-attr="onclick='addToCart(\''+${item.getProduct().getPid()}+'\')'">
                                                                    +
                                                                </button>
                                                            </div>
                                                        </td>

                                                        <td class="hidden-xs"><strong class="text-bold row-total"><span
                                                                th:text="${item.getSubtotal()}"></span></strong></td>

                                                        <td class="hidden-xs">
                                                            <button type="button" class="close " aria-hidden="true"
                                                                    data-th-attr="onclick='deleteItem(this,\''+${item.getProduct().getPid()}+'\')'">
                                                                ×
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    </tbody>
                                                </table>


                                                <div class="shopcart-total pull-right clearfix">
                                                    <!--<div class="cart-subtotal text-xs m-b-sm clearfix">-->
                                                    <!--<span class="pull-left" th:text="#{total}">Sub Total:</span>-->
                                                    <!--<span class="pull-right"><span th:text="${cart.getTotal()}"></span> </span></strong></span>-->
                                                    <!--</div>-->
                                                    <div class="cart-total text-bold m-b-lg clearfix">
                                                        <span class="pull-left" th:text="#{total}">Grand Total:</span>
                                                        <span class="pull-right">
                                                            <span th:text="${cart.getTotal()}"></span>
                                                           </span>
                                                        </span>
                                                    </div>
                                                    <div class="text-center">
                                                        <a th:href="@{/order/create}"
                                                           class="checkout-button button alt wc-forward"
                                                           th:text="#{proceedtocheckout}">Proceed to Checkout</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                    </main>
                                </div>

                                <div th:if="${cart.itemMap.isEmpty()}">
                                    <h5>您的购物车还是空的，赶紧行动吧！您可以：</h5>
                                    <a th:href="@{/shop}"><h5> 前往商城</h5></a>
                                </div>


                            </div>
                        </div>
                    </div>

                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>


    <!-- DIALOGS -->
    <div class="modal fade" id="search_form" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog block-popup-search-form">
            <form role="search" method="get" class="form-search searchform" action="">
                <input type="text" value="" name="s" class="search-query" th:placeholder="#{enteryourkeyword}"/>

                <button type="submit" class="fa fa-search button-search-pro form-button"></button>

                <a href="javascript:void(0)" title="Close" class="close close-search" data-dismiss="modal">X</a>
            </form>
        </div>
    </div>
    <div th:replace="commons/bar::#login_form"></div>
    <a id="etrostore-totop" href="#"></a>

</div>


<script type="text/javascript" th:src="@{js/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{js/jquery/jquery-migrate.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{js/jquery/js.cookie.min.js}"></script>
<!-- OPEN LIBS JS -->
<script type="text/javascript" th:src="@{js/owl-carousel/owl.carousel.min.js}"></script>
<script type="text/javascript" th:src="@{js/slick-1.6.0/slick.min.js}"></script>

<script type="text/javascript" th:src="@{js/yith-woocommerce-compare/jquery.colorbox-min.js}"></script>
<script type="text/javascript" th:src="@{js/sw_core/isotope.js}"></script>
<script type="text/javascript" th:src="@{js/sw_core/jquery.fancybox.pack.js}"></script>
<script type="text/javascript" th:src="@{js/sw_woocommerce/category-ajax.js}"></script>
<script type="text/javascript" th:src="@{js/sw_woocommerce/jquery.countdown.min.js}"></script>
<script type="text/javascript" th:src="@{js/wc-quantity-increment.min.js}"></script>
<script type="text/javascript" th:src="@{js/woocommerce/cart.min.js}"></script>
<script type="text/javascript" th:src="@{js/js_composer/js_composer_front.min.js}"></script>
<script type="text/javascript" th:src="@{/js/layer.js}"></script>
<script type="text/javascript" th:src="@{js/plugins.js}"></script>
<script type="text/javascript" th:src="@{js/megamenu.min.js}"></script>
<script type="text/javascript" th:src="@{js/main.min.js}"></script>

<script type="text/javascript">
    var sticky_navigation_offset_top = $("#header .header-bottom").offset().top;
    var sticky_navigation = function () {
        var scroll_top = $(window).scrollTop();
        if (scroll_top > sticky_navigation_offset_top) {
            $("#header .header-bottom").addClass("sticky-menu");
            $("#header .header-bottom").css({"top": 0, "left": 0, "right": 0});
        } else {
            $("#header .header-bottom").removeClass("sticky-menu");
        }
    };
    sticky_navigation();
    $(window).scroll(function () {
        sticky_navigation();
    });
    $(function () {
        $(".minus").click(
            function () {
                alert("-")
            }
        )

        $(".plus").click(
            function () {
                alert("+")
            }
        )
    })

    function addToCart(id) {
        $.ajax({
            url: '/add?count=1&pid=' + id,
            type: 'post',
            success: function (data) {
                console.log("添加商品")
            },
            fail: function (data) {
                alert("fail")
            }
        })
    }

    //购物车的+ -中的-
    function deleteFromCart(id) {
        $.ajax({
            url: '/add?count=-1&pid=' + id,
            type: 'post',
            success: function (data) {
                console.log("删除商品")
            },
            fail: function (data) {
                alert("fail")
            }
        })
    }

    //删除某一购物项
    function deleteItem(elem, id) {
        $.ajax({
            url: '/cart/delete?pid=' + id,
            type: 'get',
            success: function (data) {
                $(elem).parent().parent().remove()
            },
            fail: function (data) {
                console.log('fail')
            }
        })
    }

    // $(".remove").click(function () {
    //     //删除当前
    //     $('#deleteForm').attr("action",$(this).attr("del_uri")).submit()
    // })

    $(document).ready(function () {
        $(".show-dropdown").each(function () {
            $(this).on("click", function () {
                $(this).toggleClass("show");
                var $element = $(this).parent().find("> ul");
                $element.toggle(300);
            });
        });


    });
</script>

<!--[if gte IE 9]><!-->
<script type="text/javascript">
    var request, b = document.body, c = 'className', cs = 'customize-support',
        rcs = new RegExp('(^|\\s+)(no-)?' + cs + '(\\s+|$)');
    request = true;

    b[c] = b[c].replace(rcs, ' ');
    // The customizer requires postMessage and CORS (if the site is cross domain)
    b[c] += (window.postMessage && request ? ' ' : ' no-') + cs;
</script>
<script th:src="@{/js/products.js}"></script>
<script th:src="@{/js/owl.carousel.js}"></script>
<script th:src="@{/js/modernizr.min.js}"></script>
<!--<![endif]-->
</body>
</html>

